<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath(); %>
  
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/css/style.css" />

<!-- 查看已禁用列表 -->
<style type="text/css">
	.List{
		border:2px solid skyblue;
		width:160px;
		height:30px;
		margin-left:15px;
		margin-top:10px;
		font-size:18px;
		color:gray;
		border-radius:10px;
		text-align:center;
		cursor:pointer;
	}
	.List:hover{
		color:skyblue;
	}
	
</style>

<!-- 启用和禁用的样式 -->
<style type="text/css">
	#start{
		background-color:#00CC66;
		width:60px;
		height:24px;
		border-radius:5px;
		color:white;
		text-align:center;
		margin-left:30px;
		cursor:pointer;
	}
	#start:hover{
		background-color:#00FF99;
		color:gray;
	}
	
	#stop{
		background-color:#FF3333;
		width:60px;
		height:24px;
		border-radius:5px;
		color:white;
		text-align:center;
		margin-left:30px;
		cursor:pointer;
	}
	#stop:hover{
		background-color:#FF3366;
		color:gray;
	}
</style>

<!-- 页码样式 -->
<style type="text/css">
	#paging a{
		border:2px solid skyblue;
		display:block;
		width:20px;
		height:20px;
		float:left;
		margin-left:2px;
		border-radius:5px;
		text-align:center;
		text-decoration:none;  
	}
	
</style>
<title>垃圾分类管理</title>
</head>
<body>

<c:set var="beginTime" value="${requestScope.criteriaMap.beginTime }"></c:set>
<c:set var="endTime" value="${requestScope.criteriaMap.endTime }"></c:set>
<c:set var="searchStr" value="${requestScope.criteriaMap.searchStr }"></c:set>
<c:set var="pageNum" value="${requestScope.pageInfo.pageNum}"></c:set>
<c:set var="criteria" value='beginTime=${requestScope.criteriaMap.beginTime }&endTime=${requestScope.criteriaMap.endTime }&searchStr=${requestScope.criteriaMap.searchStr }'></c:set>

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 垃圾数据管理<span class="c-gray en">&gt;</span> 垃圾数据管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<c:if test="${requestScope.enable==1}">
		<div class="List" id="stopList">查看已禁用列表</div>
	</c:if>
	<c:if test="${requestScope.enable==0 }">
		<div class="List" id="startList">查看已启用列表</div>
	</c:if>
	<div style="margin-top:15px;" class="cl pd-5 bg-1 bk-gray mt-20"> 
		
		<input value="${beginTime }" id="datemin" class="input-text Wdate" name="beginTime" type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" placeholder="提交时间" style="width:120px;border-radius:10px;margin-left:260px;">
		-
		<input value="${endTime }" id="datemax" class="input-text Wdate" name="endTime" type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" placeholder="提交时间"  style="width:120px;border-radius:10px;">
		<input value="${searchStr }" id="searchStr" name="searchStr" type="text" class="input-text" style="width:260px;border-radius:10px;margin-left:20px;" placeholder="输入名称、上传人、城市">
		<button id="search" class="btn btn-success radius"><i class="Hui-iconfont">&#xe665;</i> 搜索</button> 
	</div> 
	
	<div style="margin-top:20px;" class="mt-20">
		<table class="table table-border table-bordered table-bg table-sort">
			<thead>
				<tr class="text-c">
					<th width="40">序号</th>
					<th width="80">垃圾名称</th>
					<th width="80">上传人</th>
					<th width="70">数量</th>
					<th width="80">城市</th>
					<th width="70">时间段</th>
					<th width="80">提交时间</th>
					<th width="70">提交类型</th>
					<th width="60">详情</th>
					<th width="80px;">状态</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody>
			
				<c:forEach items="${requestScope.pageInfo.list }" var="data" varStatus="stat">
				<tr id="list" class="text-c">
					<td>${stat.count }</td>
					<td>${data.rubbish.name }</td>
					<td>${data.userinfo.name }</td>
                    <td>${data.count }${data.unit.name }</td>
					<td>${data.city.province.province_name }<br/>${data.city.city_name }</td>
					<td><fmt:formatDate value="${data.beginTime }" pattern="yyyy-MM"/>至<br/><fmt:formatDate value="${data.endTime }" pattern="yyyy-MM"/></td>
                    <td><fmt:formatDate value="${data.inputTime }" pattern="yyyy-MM-dd"/></td>
					<td>${data.isDispose==false?"<div style='color:orange;'>处理</div>":"<div style='color:#CC66CC;'>产生</div>" }</td>
					<td><a>查看详情</a></td>
					<td>${data.enable==true?"<div style='color:#00CC66;'>已启用</div>":"<div style='color:red;'>已禁用</div>" }</td>
					<td><c:if test="${data.enable==true }">
							<div id="stop">禁&nbsp;&nbsp;用</div>
						</c:if>
						<c:if test="${data.enable!=true }">
							<div id="start">启&nbsp;&nbsp;用</div>
						</c:if>
						<input id="id" value="${data.id }" type="hidden"/>
					</td>
				</tr>
				</c:forEach>
				
			</tbody>
		</table>
	</div>
<!-- 分页开始 -->
	<div id="paging" style="padding-left:650px;margin-top:30px;margin-bottom:100px;">
		<a id="first" style="width:35px" href="<%=path%>/manager/rubbish/rubbishData?pageNum=1&${criteria}&enable=${requestScope.enable}">首页</a>
		<a id="prev" style="width:50px;">上一页</a>
		<c:forEach items="${requestScope.pageInfo.navigatepageNums }" var="page">
		<a id="page${page }" href="<%=path%>/manager/rubbish/rubbishData?pageNum=${page}&${criteria}&enable=${requestScope.enable}">${page}</a>
		</c:forEach>
		<a id="next" style="width:50px;" href="javaScript:void(0)">下一页</a>&nbsp;
		<a id="last" style="width:35px" href="<%=path%>/manager/rubbish/rubbishData?pageNum=${requestScope.pageInfo.pages}&${criteria}&enable=${requestScope.enable}">尾页</a>
		<span>共${requestScope.pageInfo.pages}页</span>&nbsp;&nbsp;
		<span>共&nbsp;${requestScope.pageInfo.total}&nbsp;条数据</span>
	</div>
</div>	
<!-- 分页结束 -->	

<script type="text/javascript" src="<%=path%>/static/managecss/lib/My97DatePicker/4.8/WdatePicker.js"></script>  
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script> 
<script type="text/javascript">
$(function(){
	var path = "${pageContext.request.contextPath}";
	var enable = 1;
	/*查看已禁用列表*/
	$("#stopList").click(function(){
		enable = 0;
		location.href = path+"/manager/rubbish/rubbishData?enable="+enable;
	});
	/*查看已启用列表*/
	/*查看已禁用列表*/
	$("#startList").click(function(){
		enable = 1;
		location.href = path+"/manager/rubbish/rubbishData?enable="+enable;
	});
	
	/*点击启用和禁用*/
	$("div[id=stop]").click(function(){
		var id = $(this).parent().find("#id").val();
		$.ajaxSettings.async = false;
		$.post(path+"/manager/startAndStop",
				{id:id,enable:0},
				function(mes){
					location.href = path+"/manager/rubbish/rubbishData?pageNum=${pageNum}&enable=${requestScope.enable}";
				});
		
	});
	$("div[id=start]").click(function(){
		var id = $(this).parent().find("#id").val();
		$.ajaxSettings.async = false;
		$.post(path+"/manager/startAndStop",
				{id:id,enable:1},
				function(mes){
					location.href = path+"/manager/rubbish/rubbishData?pageNum=${pageNum}&enable=${requestScope.enable}";
				});
		
	});
	
	/*点击搜索*/
	 $("#search").click(function(){
		 var beginTime = $("#datemin").val();
		 var endTime = $("#datemax").val();
		 var searchStr = $("#searchStr").val();
		
		 location.href = path+"/manager/rubbish/rubbishData?beginTime="+beginTime+"&endTime="+endTime+"&searchStr="+searchStr+"&enable=${requestScope.enable}";
	 });
	
	/*分页*/
	/*当前页改变背景颜色*/
	$("#page${requestScope.pageInfo.pageNum}").css("background-color","skyblue");
	if(${pageNum}<=1){
		$("#prev").css("color","gray");		//当前为第一页，字体颜色为灰色
		$("#prev").css("border","gray");	//当前为第一页，边框颜色为灰色
		$("#first").css("color","gray");	//当前为第一页，首页颜色为灰色
		$("#first").css("border","gray");	//当前为第一页，首页边框颜色为灰色
	}
	if(${pageNum}>=${requestScope.pageInfo.pages}){

		$("#next").css("color","gray");		//当前为最后页，字体颜色为灰色
		$("#next").css("border","gray");	//当前为最后页，边框颜色为灰色
		$("#last").css("color","gray");	//当前为最后页，尾页颜色为灰色
		$("#last").css("border","gray");	//当前为最后页，尾页边框颜色为灰色
	}
	
	/*上一页，下一页*/
	$("#prev").click(function(){
		if(${pageNum}<=1){
			$(this).attr("href","javaScript:void(0)");
		}else{
			$(this).attr("href",path+"/manager/rubbish/rubbishData?pageNum=${pageNum-1}&${criteria}&enable=${requestScope.enable}");
		}
	});
	
	$("#next").click(function(){
		if(${pageNum}>=${requestScope.pageInfo.pages}){
			$(this).attr("href","javaScript:void(0)");
		}else{
			$(this).attr("href",path+"/manager/rubbish/rubbishData?pageNum=${pageNum+1}&${criteria}&enable=${requestScope.enable}");
		}
	});
	
	/*批量操作*/
	
	/* layer.confirm('确认删除吗？', {
		  btn: ['确定', '取消'] //可以无限个按钮
		  ,
		}, function(index, layero){
				layer.close(index);
			
		
		}, function(index){
		  
			
		}); */
	
	
});


</script>
</body>
</html>